.box {
  display: flex;
  justify-content: space-between;
  height: 538px;
  // 公共样式
  .blt-all {
    padding: 20px;
    border-radius: 20px;
    box-sizing: border-box;
  }
  // 左侧
  .box-left {
    padding-right: 10px;
    width: 75%;
    height: 100%;
    // 左侧上方
    .box-left-top {
      display: flex;
      margin-bottom: 20px;
      height: 166px;
      // 公共样式
      .grid-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 25%;
        border-radius: 4px;
        min-height: 107px;
        // 文字样式
        .left-desc {
          font-size: 12px;
          color: #91a7dc;
        }
        .left-num {
          color: #072074;
          font-size: 36px;
          font-weight: 700;
          text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
        }
        .right-desc {
          color: #de9690;
        }
        .right-num {
          color: #ff5757;
          text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
        }
      }
      // 蓝框
      .bltl {
        margin-right: 10px;
        width: 55%;
        height: 100%;
        background-color: #e9f3ff;
        background-image: url(),
          url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
        background-repeat: no-repeat, no-repeat;
        background-position: 0 0, right bottom;
      }
      // 红框
      .bltr {
        margin-left: 10px;
        width: 45%;
        height: 100%;
        background-color: #fbefe8;
        background-image: url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        .grid-content {
          padding: 0 30%;
        }
      }
    }
    // 左侧下方
    .box-left-bottom {
      width: 1240px;
      height: 352px;
      background-color: #fff;
      // 可视化图表
      .echart {
        display: flex;
        height: 290px;
        .echart-box {
          padding-left: 20px;
          width: 36%;
          height: 100%;
          .echart-left {
            width: 100%;
            height: 100%;
          }
        }
      }
      .week-month-year {
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        float: right;
        width: 129px;
        height: 34px;
        background: rgba(233, 243, 255, 0.37);
        border-radius: 10px;
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 37px;
          height: 25px;
          font-size: 14px;
          cursor: pointer;
        }
        .is-checked {
          background: #fff;
          box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
          border-radius: 7px;
          font-weight: 600;
          color: #333;
        }
      }
    }
  }
  // 公共标头样式
  .work {
    margin-right: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }
  .time {
    font-size: 12px;
    color: #999;
  }
  // 商品热榜
  .box-right {
    margin-left: 10px;
    width: 25%;
    height: 100%;
    background-color: #fff;
    .el-row {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 460px;
      .el-col {
        display: flex;
        i {
          display: inline-block;
          width: 16px;
          height: 20px;
          margin-left: 10px;
          text-align: center;
          font-size: 12px;
          color: #e9b499;
          line-height: 14px;
          background-image: url(../../assets/homePage/Other.png);
          background-repeat: no-repeat;
          background-size: contain;
        }
        .Champion {
          width: 21px;
          color: #8e5900;
          background-image: url(../../assets/homePage/Champion.png);
        }
        .Runner-up {
          width: 21px;
          color: #494949;
          background-image: url(../../assets/homePage/Runner-up.png);
        }
        .Third {
          width: 21px;
          color: #cf6d3d;
          background-image: url(../../assets/homePage/Third.png);
        }
        .goodsname {
          font-size: 14px;
          color: #333;
        }
        .num {
          font-size: 14px;
          color: #737589;
        }
      }
    }
  }
}
.parth {
  margin-top: 20px;
  .grid-content {
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    height: 353px;
    .title {
      font-weight: 700;
      .el-icon-chat-dot-round {
        float: right;
        color: #5f84ff;
        cursor: pointer;
      }
    }
    .chart {
      height: 330px;
      display: flex;
      .canvas {
        width: 70%;
        height: 100%;
      }
      .numerical {
        margin-top: 30px;
        width: 130px;
        height: 200px;
        padding-top: 47px;
        padding-left: 38px;
        background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
          linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
          linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
          linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        .count {
          margin-top: 10px;
          height: 33px;
          font-size: 24px;
          font-weight: 600;
          color: #072074;
          line-height: 33px;
        }
        .count2 {
          margin-top: 20px;
        }
        .name {
          height: 17px;
          margin-top: 6px;
          font-size: 12px;
          font-weight: 400;
          color: #000412;
          line-height: 17px;
        }
      }
    }
  }
}
